<template>

  <li class="aui-list-item" style="width:100%;background: white;">
    <div class="aui-media-list-item-inner">
      <div class="aui-list-item-media" style="height: 5.25rem;width:5.25rem; padding: 0" @click="gotoDetail">
        <img  v-lazy="comInfor.mainPic " style="width: 100%;height: 100%">
        <!-- <em><span>超值<br>特惠</span></em> -->
      </div>
      <div class="suggest" style="width:12.75rem;text-align: left;border-bottom: 1px solid rgb(234, 234, 234);">
        <h3 class="cjy-text-overflow" style="width:100%; text-align: left;vertical-align:middle;height: 1.4rem;line-height: 1.4rem;font-size: 0.7rem;"
            @click="gotoDetail">
          <label :class="{[featureClass]:true}" style="height:1.3rem;box-sizing: border-box">{{featureName}}</label>{{goodsName}}
        </h3>
        <p class="cjy-text-overflow" style="height:1rem;"> {{subTitle || '&nbsp;'}}</p>
        <p>数量
          {{goodsQuantity || 1}}{{goodsUnit}}
        </p>
        <p  style="text-align: left">
          <span>¥<em>{{changePrice(showWsPrice) || "&nbsp;"}}</em></span>{{goodsUnit ? '/' + showUnit : "&nbsp;"}}
        </p>

        <!--<p v-if="goodsType == 6" style="text-align: left">-->
          <!--<span>¥<em>{{changePrice(eachPrice) || "&nbsp;"}}</em></span>{{goodsUnit ? '/' + goodsUnit : "&nbsp;"}}-->
        <!--</p>-->
      </div>
      <!-- <div style="position: absolute;bottom:0.7rem; right: 0.7rem;height: 1.5rem">
        <update-cart v-if="goodsId"
                     :commodityInfor="comInfor"
                     :goodsId="goodsId"
                     ref="updateCart">

        </update-cart>
      </div> -->
    </div>
  </li>

</template>

<script>
  // import Hello from './components/Hello'
  import UpdateCart from '../UpdateCart'
  import lazyLoad from 'vue-lazyload'

  export default {
    data () {
      return {
        featureLabelList: null, // 类名查询表
        featureClass: '',//特色标签css类名
        goodsCode: "",  //产品分类
        enterpriseName: "宁家",  // 商家名称
        goodsId: "",   //产品ID
        goodsName: "", //产品名称
        normalPrice: "", //产品价格
        goodsUnit: "", //产品单位
        city: "", //产地
        shopName: "", //商店名称
        saleqty: "", //库存
        goodsModel: "", // 商品型号
        goodsType: 0, //售价
        normalPrice: "1.00", //原价
        mainPic: null, //主图缩略图
        featureLabel: 0, //特色标签
        featureName: '',
        subTitle: '',
        showWsPrice: 0,
        showUnit: '',
        eachPrice: 0,
        showNormalPrice: 0,
      }
    },
    components: {UpdateCart},
    props: {
      goodsQuantity: {
        type: Number,
        default: 1
      },
      comInfor: {

        type: Object,
        default: () => {
          return {
            goodsCode: "",  //产品分类
            enterpriseName: "宁家",  // 商家名称
            goodsId: "",   //产品ID
            goodsName: "", //产品名称
            normalPrice: "", //产品价格
            goodsUnit: "", //产品单位
            city: "", //产地
            shopName: "", //商店名称
            saleqty: "", //库存
            goodsModel: "", // 商品型号
            goodsType: 0, //售价
            normalPrice: "1.00", //原价
            mainPic: null, //主图缩略图
            featureLabel: "进口", //特色标签
            inActivity: 0,
          }
        }
      },
    },
    mounted () {
      this.initData()
      this.initFeatureLabelList()


    },
    methods: {
      changePrice (data) {
        return parseFloat(data).toFixed(2)
      },
      initData () {
        this.goodsCode = this.comInfor.goodsCode//产品分类
        this.enterpriseName = this.comInfor.enterpriseName// 商家名称
        this.goodsId = parseInt(this.comInfor.goodsId) //产品ID
        this.goodsName = this.comInfor.goodsName//产品名称
        this.normalPrice = this.comInfor.normalPrice || this.comInfor.goodsPrice //产品价格
        this.goodsUnit = this.comInfor.goodsUnit//产品单位
        this.city = this.comInfor.city//产地
        this.shopName = this.comInfor.shopName//商店名称
        this.saleqty = this.comInfor.saleqty//库存
        this.goodsModel = this.comInfor.goodsModel// 商品型号
        this.goodsType = this.comInfor.goodsType//售价
        this.normalPrice = this.comInfor.normalPrice//原价
        this.mainPic = this.comInfor.mainPic  //主图缩略图
        this.subTitle = this.comInfor.subTitle || ' '
        this.showWsPrice = this.comInfor.showWsPrice
        this.showNormalPrice = this.comInfor.showNormalPrice
        this.showUnit = this.comInfor.showUnit
        this.eachPrice = this.comInfor.eachPrice
        this.inActivity = this.inActivity
        this.featureLabel = parseInt(this.comInfor.featureLabel) || 0//特色标签
      },
      gotoDetail () {
        this.$router.push({path: 'detail', query: {code: this.goodsCode}})
      },
      initFeatureLabelList () {
        this.featureLabelList = new Map(
          [
            [1, ['绿色', 'green']],
            [2, ['有机', 'organic']],
            [3, ['进口', 'imported']],
            [4, ['本地', 'local']],
          ])

        var actvieFeature = this.featureLabel ? this.featureLabelList.get(this.featureLabel) : ''
        this.featureClass = actvieFeature ? actvieFeature[1] : ''
        this.featureName = actvieFeature ? actvieFeature[0] : ''
      },
      addToCart () {
        this.$refs.updateCart && this.$refs.updateCart.addToCart()

      }
    }
  }
</script>

<style>
  .cjy-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    width: 85%;
  }

</style>
